import { ref } from "vue";
export function useTogglePicker() {
  const showPicker = ref(false);
  const columns = ref([]);

  const unitColumns = [
    { text: "g", value: "1" },
    { text: "kg", value: "1000" },
  ];
  const imperialColumns = [
    { text: "oz", value: "1" },
    { text: "lb", value: "16" },
    { text: "st", value: "144" },
  ];

  function togglePicker(columnName) {
    showPicker.value = !showPicker.value;
    if (columnName === "metric") {
      columns.value = unitColumns;
    } else {
      columns.value = imperialColumns;
    }
  }
  return {
    showPicker,
    columns,
    togglePicker,
  };
}
